<template>
  <div class="select-ground-prepend">
    <div class="select-group__prepend">
      <span v-if="required" style="color: #F56C6C">*</span>
      {{ label }}
    </div>
    <slot name="select" />
  </div>
</template>
<script>
export default {
  name: 'SelectGroupPrepend',
  props: {
    label: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style lang="scss" scoped>
.select-ground-prepend {
  font-size: 14px;
  display: inline-flex;
  .select-group__prepend {
    background-color: #fff;
    border-color: #ddd;
    color: #666;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
    padding: 0 26px 0 8px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & ::v-deep {
    .el-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
</style>
